<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>woodwhales-music</title>
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
    <link rel="manifest" href="/site.webmanifest">
    <link rel="stylesheet" th:href="@{/webjars/element-ui/lib/theme-chalk/index.css}">
    <script th:src="@{/webjars/vue/dist/vue.js}"></script>
    <script th:src="@{/webjars/element-ui/lib/index.js}"></script>
    <script type="text/javascript" th:src="@{/webjars/axios/dist/axios.js}"></script>
    <!-- https://aplayer.js.org/#/zh-Hans/ -->
    <script th:src="@{/aplyer/APlayer.min.js}"></script>
    <link rel="stylesheet" th:href="@{/aplyer/APlayer.min.css}">
    <link rel="stylesheet" th:href="@{/css/admin-css.css}" />
    <style>
        .el-tag + .el-tag {
            margin-left: 10px;
        }
    </style>
</head>
<body>
    <div id="app">
        <el-row>
            <el-col :span="2">&nbsp;</el-col>
            <el-col :span="20">
                <div th:replace="~{admin2/header::header}"></div>
                <el-row>
                    <el-row :gutter="20">
                        <el-col :span="20">
                            <el-form ref="queryForm" :model="queryForm" label-width="80px" @submit.native.prevent>
                                <el-form-item label="名称/作者">
                                    <el-input v-model.trim="queryForm.searchInfo" @keyup.enter.native="onQueryForSearch"></el-input>
                                </el-form-item>
                            </el-form>
                        </el-col>
                        <el-col :span="4">
                            <el-button type="primary" @click="onQueryForSearch">搜索</el-button>
                            <el-button type="info" @click="onReset">重置</el-button>
                        </el-col>
                    </el-row>
                </el-row>
                <el-row style="text-align: left; margin-bottom: 12px;">
                    <el-button type="success" size="mini" icon="el-icon-plus" @click="onAdd">添加</el-button>
                    <el-button type="warning" size="mini" icon="el-icon-download" @click="onExport">导出</el-button>
                </el-row>
                <!-- 吸底播放 -->
                <el-row style="text-align: center; margin-bottom: 12px;" v-show="musicPlayer.musicAudioUrl !== null">
                    <div id="aplayer"></div>
                </el-row>
                <el-row style="margin-bottom: 12px;">
                    <el-table :data="sys.tableData" ref="tableList" style="width: 100%" @sort-change="sortChange"
                    @expand-change="expandMusicTag">
                        <el-table-column
                                fixed
                                type="index"
                                :index="calcIndex"
                                width="50">
                        </el-table-column>
                        <el-table-column fixed type="expand">
                            <template slot-scope="props">
                                <el-row>
                                    标签：<el-tag
                                            :key="tagName"
                                            v-for="(tagName, index)  in props.row.tagNameList"
                                            closable
                                            :disable-transitions="false"
                                            @close="handleCloseTag(tagName, props.row)">
                                        {{tagName}}
                                    </el-tag>
                                </el-row>
                                <el-row style="margin-top: 10px;">
                                    <span style="color: #606266">选择标签：</span>
                                    <el-select
                                            size="mini"
                                            v-model="props.row.tagNameList"
                                            collapse-tags
                                            multiple
                                            filterable
                                            placeholder="搜索标签">
                                        <el-option
                                                v-for="tagName in sys.quickTagNameList"
                                                :key="tagName"
                                                :label="tagName"
                                                :value="tagName">
                                        </el-option>
                                    </el-select>
                                    <el-button size="mini" type="success" @click="onSaveOrUpdateMusicTagList(props.row)">确认更新</el-button>
                                    <el-popover
                                            placement="right"
                                            width="350"
                                            trigger="click">
                                        <el-form :inline="true" :model="addTagForm">
                                            <el-form-item label="标签">
                                                <el-input v-model="addTagForm.tagName" placeholder="请输入"></el-input>
                                            </el-form-item>
                                            <el-form-item>
                                                <el-button type="primary" size="mini" @click="onAddMusicTag">确认</el-button>
                                            </el-form-item>
                                        </el-form>
                                        <el-button style="border-left: 10px;" type="info" size="mini" icon="el-icon-plus" slot="reference" circle></el-button>
                                    </el-popover>
                                </el-row>
                            </template>
                        </el-table-column>
                        <el-table-column
                                fixed
                                prop="title"
                                label="音乐名称">
                            <template slot-scope="scope">
                                <span v-show="scope.row.linked" style="color: #5FB878" >{{scope.row.title}}</span>
                                <span v-show="!scope.row.linked" style="color: #FF5722">{{scope.row.title}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="artist"
                                label="作者">
                        </el-table-column>
                        <el-table-column label="封面">
                            <template slot-scope="scope">
                                <el-image
                                        :id="'image'+scope.row.id"
                                        style="width: 50px; height: 50px"
                                        :src="scope.row.coverUrl"
                                        fit="cover"></el-image>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="album"
                                label="专辑">
                        </el-table-column>
                        <el-table-column
                                prop="sort"
                                label="排序"
                                :sortable="'custom'"
                                width="100">
                        </el-table-column>
                        <el-table-column
                                prop="gmtCreated"
                                :sortable="'custom'"
                                label="创建时间">
                        </el-table-column>
                        <el-table-column
                                prop="gmtModified"
                                :sortable="'custom'"
                                label="更新时间">
                        </el-table-column>
                        <el-table-column
                                fixed="right"
                                label="操作"
                                width="210">
                            <template slot-scope="scope">
                                <el-button @click="onEdit(scope.row)" type="success" size="mini" icon="el-icon-edit"></el-button>
                                <el-button @click="onDelete(scope.row)" type="danger" size="mini" icon="el-icon-delete"></el-button>
                                <template v-if="scope.row.audioUrl !== null">
                                    <el-button @click="onTry(scope.row)" type="primary" size="mini" icon="el-icon-headset"></el-button>
                                </template>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-row>
                <el-row style="margin-bottom: 12px; text-align: center;">
                    <el-pagination
                            :current-page="sys.currentPage"
                            :page-size="sys.pageSize"
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :page-sizes="[10, 20, 50, 100, 300]"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="sys.total">
                    </el-pagination>
                </el-row>
                <div th:replace="~{admin2/admin-foot::admin-foot}"></div>
            </el-col>
            <el-col :span="2">&nbsp;</el-col>
        </el-row>
        <!-- 系统设置按钮 -->
        <el-button @click="onSysConfig" type="success" class="floating-area" icon="el-icon-setting" circle></el-button>
    </div>
</body>
<script type="text/javascript" th:inline="none">
    new Vue({
        el: '#app',
        data: function() {
            return {
                queryForm: {
                    searchInfo: null
                },
                addTagForm: {
                    tagName: ''
                },
                sys: {
                    showAddTagVisible: false,
                    quickTagNameList: [],
                    dateYear: new Date().getFullYear(),
                    total: 0,
                    currentPage: 1,
                    pageSize: 10,
                    orderBy: {
                        prop: null,
                        order: null
                    },
                    tableData: []
                },
                musicPlayer: {
                    musicName: '',
                    musicAuthor: '',
                    musicAudioUrl: '',
                    musicCoverUrl: '',
                    imageId: null
                }
            }
        },
        mounted() {
            this.initSys();
            this.initQueryForm();
            this.onQuery();
        },
        methods: {
            onAddMusicTag() {
                axios.post('./saveOrUpdateTag', this.addTagForm)
                .then(response => {
                    if(response.data.code === 0) {
                        this.addTagForm = {
                            tagName: ''
                        }
                        this.syncTagNameList()
                        this.$message.success(response.data.msg);
                    } else if(response.request && response.request.responseURL) {
                        window.location.href = response.request.responseURL;
                    } else {
                        this.$message.error(response.data.msg);
                    }
                })
                .catch(error => {
                    this.$message.error(error);
                });
            },
            expandMusicTag(row) {
                this.addTagForm = {
                    tagName: ''
                }
                this.syncTagNameList()
            },
            onSaveOrUpdateMusicTagList(musicInfo) {
                axios.post('./saveOrUpdateTagList', {
                    musicId: musicInfo.id,
                    tagNameList: musicInfo.tagNameList
                })
                .then(response => {
                    if(response.data.code === 0) {
                        musicInfo.tagList = response.data.data
                        this.$message.success(response.data.msg);
                    } else if(response.request && response.request.responseURL) {
                        window.location.href = response.request.responseURL;
                    } else {
                        this.$message.error(response.data.msg);
                    }
                })
                .catch(error => {
                    this.$message.error(error);
                });
                this.syncTagNameList()
            },
            handleCloseTag(tagName, musicInfo) {
                musicInfo.tagNameList.splice(musicInfo.tagNameList.indexOf(tagName), 1);
                this.syncTagNameList()
            },
            syncTagNameList() {
                axios.post('./tagNameDictList', {})
                    .then(response => {
                        if(response.data.code === 0) {
                            this.sys.quickTagNameList = response.data.data
                        } else if(response.request && response.request.responseURL) {
                            window.location.href = response.request.responseURL;
                        } else {
                            this.sys.quickTagNameList = []
                            this.$message.error(response.data.msg);
                        }
                    })
                    .catch(error => {
                        this.$message.error(error);
                    });
            },
            handleInputConfirm(musicInfo) {
                let inputValue = musicInfo.inputValue;
                if (inputValue) {
                    inputValue = inputValue.trim();
                    if(musicInfo.tagNameList.find(data => data === inputValue)) {
                        this.$message.error(`当前标签已存在，请勿重复添加`);
                        return
                    }

                    // 保存
                    musicInfo.tagNameList.push(inputValue);
                }
                musicInfo.inputVisible = false;
                musicInfo.inputValue = '';
            },
            calcIndex(index) {
                return (this.sys.currentPage - 1) * this.sys.pageSize + index + 1
            },
            sortChange(column) {
                if(!column.order) {
                    this.sys.orderBy.prop = null
                    this.sys.orderBy.order = null
                } else {
                    this.sys.orderBy.prop = column.prop
                    this.sys.orderBy.order = column.order
                }
                this.onQuery()
            },
            initAplyer() {
                if(this.musicPlayer && this.musicPlayer.musicCoverUrl !== '') {
                    const ap = new APlayer({
                        container: document.getElementById('aplayer'),
                        loop: 'none',
                        theme: '#5FB878',
                        audio: [{
                            name: this.musicPlayer.musicName,
                            artist: this.musicPlayer.musicAuthor,
                            url: this.musicPlayer.musicAudioUrl,
                            cover: this.musicPlayer.musicCoverUrl
                        }]
                    });
                    ap.play();
                }
            },
            onAdd() {
                location.href = './add'
            },
            onSysConfig() {
                location.href = './sysConfig'
            },
            onTry(row) {
                this.musicPlayer.musicAudioUrl = row.audioUrl;
                this.musicPlayer.musicCoverUrl = row.coverUrl;
                this.musicPlayer.musicName = row.title;
                this.musicPlayer.musicAuthor = row.artist;
                this.musicPlayer.imageId = 'image'+row.id;
                this.initAplyer();
            },
            onExport() {
                location.href = './export'
            },
            onReset() {
                this.$refs.tableList.clearSort()
                this.initSys();
                this.initQueryForm();
                this.onQuery();
            },
            initQueryForm() {
                this.queryForm.searchInfo = null
            },
            initSys() {
                this.sys.dateYear = new Date().getFullYear();
                this.sys.total = 0
                this.sys.currentPage = 1
                this.sys.pageSize = 10
                this.sys.orderBy.prop = null
                this.sys.orderBy.order = null
                this.sys.tableData = []
            },
            onQueryForSearch() {
              this.sys.currentPage = 1
              this.onQuery()
            },
            onQuery() {
                axios.post('./pageMusic', {
                    searchInfo: this.queryForm.searchInfo,
                    page: this.sys.currentPage,
                    limit: this.sys.pageSize,
                    orderBy: this.sys.orderBy
                })
                .then(response => {
                    if(response.data.code === 0) {
                        this.sys.total = response.data.count;
                        this.sys.tableData = response.data.data;
                        this.sys.tableData = this.sys.tableData.map(data => {
                            return {
                                ...data,
                                tagNameList: data.tagList.map(data => data.name)
                            }
                        })
                    } else if(response.request && response.request.responseURL) {
                        window.location.href = response.request.responseURL;
                    } else {
                        this.$message.error(response.data.msg);
                    }
                })
                .catch(error => {
                    this.$message.error(error);
                });
            },
            onEdit(row) {
                location.href = './add?id=' + row.id
            },
            onDelete(row) {
                this.$confirm('是否确认删除?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.post('./deleteMusic', {
                        id: row.id
                    })
                    .then(response => {
                        if(response.data.code === 0) {
                            this.onQuery();
                            this.$message({
                                message: response.data.msg,
                                type: 'success'
                            });
                        } else if(response.request && response.request.responseURL) {
                            window.location.href = response.request.responseURL;
                        } else {
                            this.$message.error(response.data.msg);
                        }
                    })
                    .catch(error => {
                        this.$message.error(error);
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            handleSizeChange(val) {
                this.sys.pageSize = val
                this.onQuery();
            },
            handleCurrentChange(val) {
                this.sys.currentPage = val
                this.onQuery();
            }
        }
    })
</script>
</html>
